<template>
  <div class="tableList">
    <vxe-grid
      class="table-normal"
      ref="table"
      resizable
      show-overflow
      row-key
      keep-source
      size="small"
      border="inner"
      :data="tableData"
      :columns="columns"
      v-bind="isEdit ? vxeOptions : null"
    >
      <template #belongOrganization="{ row }">
        <vxe-input v-model="row.belongOrganization" type="text"></vxe-input>
      </template>

      <template #belongProject="{ row }">
        <vxe-input v-model="row.belongProject" type="text"></vxe-input>
      </template>
      <template #job="{ row }">
        <vxe-select v-model="row.job" placeholder="项目岗位" clearable>
          <vxe-option
            v-for="item in postList"
            :key="item.id"
            :value="item.projectPost"
            :label="item.projectPost"
          ></vxe-option>
        </vxe-select>
      </template>
      <template #d_startTime="{ row }">
        <span>{{ row.startTime | parseTime('{y}-{m}-{d}') }}</span>
      </template>
      <template #e_startTime="{ row }">
        <vxe-input
          v-model="row.startTime"
          placeholder="日期"
          class="date"
          type="date"
          valueFormat="yyyy-MM-dd"
        ></vxe-input>
      </template>
      <template #d_endTime="{ row }">
        <span>{{ row.endTime | parseTime('{y}-{m}-{d}') }}</span>
      </template>
      <template #e_endTime="{ row }">
        <vxe-input
          v-model="row.endTime"
          placeholder="日期"
          class="date"
          type="date"
          valueFormat="yyyy-MM-dd"
        ></vxe-input>
      </template>
      <template #isPartTime="{ row }">
        <vxe-select v-model="row.isPartTime" placeholder="是否兼职" clearable>
          <vxe-option value="是" label="是"></vxe-option>
          <vxe-option value="否" label="否"></vxe-option>
        </vxe-select>
      </template>
      <template #isPractice="{ row }">
        <vxe-select v-model="row.isPractice" placeholder="是否离职" clearable>
          <vxe-option value="是" label="是"></vxe-option>
          <vxe-option value="否" label="否"></vxe-option>
        </vxe-select>
      </template>
      <template #operation="{ row }">
        <vxe-button v-if="!row.id" type="text" status="danger" @click="del(row)">删除</vxe-button>
      </template>
    </vxe-grid>
    <vxe-pager
      background
      :current-page.sync="form.page"
      :page-size.sync="form.pageSize"
      :total="total"
      :layouts="['Total', 'Sizes', 'PrevPage', 'JumpNumber', 'NextPage']"
      @page-change="change"
    >
    </vxe-pager>
  </div>
</template>
<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    total: {
      type: [String, Number],
      default: 0,
    },
    postList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const validRules = {
      dept: [{ message: '多个部门用英文逗号隔开' }],
    };
    return {
      showEdit: false,
      isEnabledFlag: false,
      isAssessmentInstructions: false,
      isUnit: false,
      isLineNumber: false,
      isOperationField: false,
      isDept: false,
      types: [
        {
          name: '项目商务状态档案',
        },
      ],
      vxeOptions: {
        'row-config': { isHover: true, isCurrent: true },
        'scroll-y': { enabled: false },
        'edit-rules': validRules,
        'edit-config': {
          trigger: 'click',
          mode: 'row',
          showStatus: true,
          showIcon: false,
          activeMethod: this.activeRowMethod,
        },
      },
      selectRow: null,
      form: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  filters: {
    formatStatus(val) {
      return val ? '启用' : '禁用';
    },
  },
  created() {
    //     this.treeDrop()
  },
  mounted() {},
  methods: {
    activeRowMethod({ row, rowIndex }) {
      return !row.id;
    },
    async del(row) {
      const $table = this.$refs.table;
      await $table.remove(row);
    },
    change({ type, currentPage, pageSize }) {
      this.$emit('pager', { currentPage, pageSize });
    },
  },
};
</script>
<style lang="scss" scoped>
.table-normal {
}
</style>
